<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#B4E6FB">
    <title>行情</title>
</head>
<style type="text/css">
    body {
        /*CSS margin(外边距)属性定义元素周围的空间*/
        margin: 0;
        /* CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距 */
        padding: 0;
        background-color: rgb(31, 33, 45);
    }

    .Kline-div {
        /* fixed 定位，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动： */
        position: fixed;
        width: 100%;
        bottom: 0rem;
        top: 0;
        /* background-color: rgb(31, 33, 45); */
    }

    .Kline-div .m-line {
        height: 49%;
        width: 100%;
        margin-bottom: 1%;
    }

    .Kline-div .K-line {
        height: 50%;
        width: 100%;
    }
</style>

<body>
    <div id="Kline-div" class="Kline-div">
        <div id="m-line" class="m-line"></div>
        <div id="k-content" class="K-line"></div>
    </div>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <script src="{{ url_for('static',filename='js/tmpData.js') }}"></script>
    <script src="{{ url_for('static',filename='js/k-line.js') }}"></script>
    <script src="{{ url_for('static',filename='js/update.js') }}"></script>
    <script>
        var mChart = echarts.init(document.getElementById('m-line'));
        var kChart = echarts.init(document.getElementById('k-content'));

        function init(){
            mChart.setOption(initMOption(getTrend(), 'hs'));
            kChart.setOption(initKOption(getKline()));
        }
        function running() {
            if (is_running()) {
                mChart.setOption(initMOption(getTrend(), 'hs'));
            }             
            if (1) {
                kChart.setOption(update_k_option(getKline()));
            } 
        }
        init();
        setInterval('running()', 1000 * 3);        //指定3秒刷新一次
    </script>
</body>

</html>